<template>
    <view class="content flex-column bg-sub">
        <view class="scroll-y full-width flex-grow" hover-class="none" hover-stop-propagation="false">
            <van-cell-group :border="false">
                <van-cell title="头像" :center="true">
                    <view class="flex align-center justify-end" hover-class="none" hover-stop-propagation="false">
                        <button class="btn-head flex align-center justify-center radius-circle" open-type="chooseAvatar"
                            @chooseavatar="onChooseAvatar">
                            <image class="img-avatar" :src="avatarUrl"></image>
                        </button>
                    </view>
                </van-cell>
                <van-cell title="昵称">
                    <!-- <van-field @nicknamereview="nicknamereview" v-model="nickName" @input="nameOnChange"
                        input-align="right" :border="false" /> -->
                    <form @submit="confirmName">
                        <view class="flex align-center justify-end">
                            <input @input="nameOnChange" @nicknamereview="nicknamereview" type="nickname"
                                :value="nickName" placeholder="请输入昵称" name="nickname" maxlength="15"
                                class="nickname-input text-primary" />

                            <button v-if="isShowNickNameOK" form-type="submit"
                                class="ml-base bg-theme text-inverse btn-nickname text-sm"
                                hover-class="nicknameBtn2">确定</button>
                        </view>
                    </form>

                </van-cell>
                <van-cell title="手机号" :value="phoneNumber"></van-cell>


            </van-cell-group>
        </view>
    </view>
</template>

<script>
import {
    mapGetters
} from 'vuex';
import {
    GetUser
} from '@/api/modules/business';
import {
    entitiesToUtf16
} from '@/utils/common';
export default {
    components: {

    },
    computed: {
        ...mapGetters({
            loading: 'app/loading',
            systemInfo: 'system/systemInfo',
            appConfig: 'app/appConfig',
            isLoggedIn: 'user/isLoggedIn'
        })
    },
    data() {
        return {
            isShowNickNameOK: false,
            nickName: '',
            avatarUrl: '',
            phoneNumber: ''
        }
    },
    onLoad() {
        this.init()
    },
    methods: {
        init() {
            this.getUser()
        },
        getUser() {
            GetUser().then(res => {
                console.log(res)
                if (res.Code == 200) {
                    this.nickName = res.Data.WeiXinName ? entitiesToUtf16(res.Data.WeiXinName) : '微信用户'
                    this.avatarUrl = res.Data.AvatarUrl || require('@/static/img/my/userimg.png')
                    this.phoneNumber = res.Data.Phone || '暂无'
                }
            })
        },
        confirmName(e) {
            console.log(111, e)
        },
        nameOnChange(e) {
            if (!this.isShowNickNameOK) {
                this.isShowNickNameOK = true
            }

        },
        nicknamereview(e) {
            console.log(222, e)
        },
        onChooseAvatar(e) {
            console.log(333, e)
        },
        submit() {

        }
    }
}
</script>

<style lang="scss" scoped>
.btn-submit {
    border-radius: $uni-border-radius-base*10;
    margin-top: $uni-spacing-col-base*4;
}

.btn-nickname {
    height: $uni-font-size-base*2;
    width: $uni-font-size-base*6;
}

.btn-head {
    width: $uni-img-size-lg*1.2;
    height: $uni-img-size-lg*1.2;
    background: transparent;
    padding: 0;
    margin: 0;
}

.img-avatar {
    width: $uni-img-size-lg*1.2;
    height: $uni-img-size-lg*1.2;
}
</style>